page-information-detail{
    @function compute-vw($px){
        @return  $px/1080*100vw
    }
    $content-color: #323232;
    $link-color: #38b549;
    $title-color: #1e2029;
    $time-color: #939598;
    $border-color: #ebe9e9;
    .scroll-content{
        padding: computed-vw(60);
    }
    .info-hd {
        .info-bar:after{
            content: " ";
            display: table;
            clear: both;
        }

        .info-title {
            font-size:computed-vw(54);
            color:  $title-color;
            float: left;
            width: computed-vw(1080-120-204-60);
            span.link{

            }
        }
        .normal{
            background: url("../assets/images/information/Collection.png") no-repeat;
            background-size: 100% 100%;
        }
        .collection_selected{
            background: url("../assets/images/information/collection_selected.png") no-repeat;
            background-size: 100% 100%;
        }

        .info-time{
            color: $time-color;
            font-size: computed-vw(42);
            padding: computed-vw(30) 0 computed-vw(60) 0;
            width: auto;
            white-space: nowrap;
        }
    }
    .info-bd {
        font-size: computed-vw(42);
        color: $content-color;
        p {
            -webkit-margin-before: 0;
            -webkit-margin-after:computed-vw(60);
        }
        img {
            max-width: 100%!important;
        }
        a {
            color: $link-color;
        }
    }
    iframe {
        display:block;
        width: 100%;
        min-height: 100%;
        overflow-x: scroll;
        overflow-y:scroll;
        position: relative;
        left: 0;
        html{
            overflow: scroll!important;
        }
        body{
            overflow: scroll!important;
        }
    }

    .info-header {
        .title-txt {
            font-size: 5vw;
            color: #1e2029;
            margin-bottom: computed-vw(30);
            word-break: break-all;
        }
        .title-bar {
            margin-bottom: 5.55vw;
            overflow: hidden;
            padding-bottom: computed-vw(30);
            .time {
                font-size: 3.33vw;
                color: #939598;
                display: block;
                float: left;
                line-height: computed-vw(80);
            }

            .btn-panel {
                display: block;
                float: right;
                position: relative;
                overflow: hidden;
                height: compute-vw(80);
                width: compute-vw(440);
                .set-btn{
                    width: compute-vw(204);
                    height: compute-vw(80);
                    border-radius: 5vw;
                    font-size:compute-vw(33);
                    line-height: compute-vw(80);
                    text-align: center;
                    position: absolute;
                    top:50%;
                    margin-top: compute-vw(-40);
                    background-size: compute-vw(38) compute-vw(38)!important;
                    background-position-y: 46%!important;
                    background-position-x: 2vw!important;
                    padding-left: 2vw;
                }
                .share-btn{
                    width: compute-vw(180);
                    right:compute-vw(228);
                    background-color: #35ac63!important;
                    background: url("../assets/images/common/icon_share_btn.png") no-repeat;
                    background-position-x: 2vw!important;
                    color:#fff;
                    padding-left: 4vw;
                }
                .collect-btn{
                    border:1px solid #e6b82d;
                    right:0;
                    color:#e6b82d;
                    background: url("../assets/images/common/icon_collect_no.png") no-repeat;
                }
                .collect-btn.collected{
                    background: url("../assets/images/common/icon_collect_yes.png") no-repeat;
                    background-color: #e6b82d;
                    color:#fff;
                    padding-left: 4vw;
                }
            }
            .btn-panel.perview{
                .share-btn{
                    right:0;
                    top:0;
                    margin:0;
                }
            }
        }
    }

    .info-file {
        width: 100%;
        border-top: 1px solid #E9E9E9;
        //border-bottom: 1px solid #E9E9E9;
        .title {
            margin-top: 5.56vw;
            margin-bottom: 4.17vw;
            display: flex;
            align-items: center;

            i {
                background-color: #38b549;
                height: 4vw;
                width: 0.8vw;
                display: inline-block;
                margin-right: 1.6vw;
            }

            span {
                font-size: 4.17vw;
                color: #1e2029;
            }
        }

        .link {
            font-size: 3.89vw;
            color: #38b549;
            margin-bottom: 4.63vw;

            &.lastLink {
                margin-bottom: 5.56vw;
            }
        }
    }

    //.info-file:before {
    //    position:absolute;
    //    content: "";
    //    height:1px;
    //    background:#E9E9E9;
    //    width:100%;
    //    top:0;
    //    -webkit-transform:scaleY(.5);
    //    -ms-transform:scaleY(.5);
    //    -o-transform:scaleY(.5);
    //    transform:scaleY(.5);
    //}
    //
    //.info-file:after {
    //    position:absolute;
    //    content: "";
    //    height:1px;
    //    background:#E9E9E9;
    //    width:100%;
    //    bottom:0;
    //    -webkit-transform:scaleY(.5);
    //    -ms-transform:scaleY(.5);
    //    -o-transform:scaleY(.5);
    //    transform:scaleY(.5);
    //}



    .share-menu{
        width:100vw;
        height:100vh;
        background-color:rgba(0,0,0,0.2);
        position:absolute;
        top:0;
        left:0;
        z-index: 1000;
        visibility:hidden;

        .tools{
            width:100vw;
            height:33.24vw;
            background-color:#fff;
            position:absolute;
            bottom:-33.24vw;
            transition: 0.2s transform;
            display:flex;
            &>div{
                width:50%;
                height:100%;
                display:flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                font-size:3.89vw;
                .icon{
                    width:10.185vw;
                    height:10.185vw;
                    border-radius:50%;
                    background-repeat:no-repeat;
                    background-size:cover;
                }
                .inner{
                    background:none;
                    padding:0;
                    display:flex;
                    flex-direction: column;
                    justify-content: space-between;
                    align-items: center;
                    height:16vw;
                    width:100%;
                }

                &.share-friend{
                    .icon{
                        background-image:url(../assets/images/activity/activity-details/wechat.png)
                    }
                }
                &.share-moment{
                    .icon{
                        background-image:url(../assets/images/activity/activity-details/pyq.png)
                    }
                    .inner{
                        border-left:1px solid #e9e9e9;
                    }
                }
            }
        }

        &.is-show{
            visibility:visible;
            .tools{
                transform:translate3d(0,-33.24vw,0);
            }
        }
    }
}
